<template>
	<view class="container">
		<swiper class="swiper" circular indicator-dots indicator-color="rba(255,255,255,.5)" indicator-active-color="#ffffff" 
			autoplay :interval="3000">
			<swiper-item v-for="(banner, b) in banners" :key="b">
				<view class="swiper-item">
					<image :src="domain+banner.banner_image" mode="aspectFill" class="img"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="empty" v-if="goods.length == 0">
			<image src="@/static/image/empty.png" mode="widthFix"></image>
			<view class="text">暂无商品</view>
		</view>
		<view class="goodsList">
			<view class="goodsItem" v-for="(good, g) in goods" :key="g" @click="routerGoods(good)">
				<image :src="domain+good.goods_image" mode="aspectFill" class="img"></image>
				<view class="name nobr">{{good.name}}</view>
				<view class="price flex"><text>￥</text>{{good.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	export default {
		data() {
			return {
				domain: getApp().globalData.DOMAIN,
				banners: [],
				goods: [],
			}
		},
		onShow() {
			this.getGoodsInfo()
		},
		methods: {
			getGoodsInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/index/banner',
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.banners = res.data
					}
				});
				common.api({
					method: 'GET',
					url: '/mobile/index/goodsList',
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.goods = res.data
					}
				});
			},
			routerGoods(item) {
				uni.navigateTo({url:'/pages/index/goods?id='+item.id})
			}
		}
	}
</script>

<style scoped lang="less">
	.swiper-item {
		height: 100%;
		.img {
			width: 100%;
			height: 100%;
		}
	}
	.goodsList {
		padding: 30rpx 3vw 120rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		.goodsItem {
			width: 45vw;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			overflow: hidden;
			box-shadow: 0 0 10rpx rgba(0,0,0,.1);
			&:nth-of-type(2n) {
				margin-left: 4vw;
			}
			.img {
				display: block;
				width: 45vw;
				height: 45vw;
				background-color: gainsboro;
			}
			.name {
				padding: 10rpx 20rpx;
			}
			.price {
				color: red;
				padding: 0 20rpx 10rpx;
				font-size: 36rpx;
				align-items: baseline;
				text {
					font-size: 26rpx;
				}
			}
		}
	}
</style>
